<template>
	<view class="mask" v-if="show">
		<view class="warp" :style="{height:height+'px'}">
			<view class="rect">
				<image class="bg" src="https://oss.jxhecong.com/v2/image/updateVersion@2x.png"></image>
				<view class="version">
					<text class="version-tlt">发现新版本</text>
					<text class="v-num">v{{versionInfo.updateVersion}}</text>
				</view>
				<view class="version-des">
					<scroll-view style="margin-top: 20rpx;">
						<view class="item" v-for="(item,index) in versionInfo.updateMessage" :key="index">
							<view class="dot"></view>
							<text class="item-txt">{{item}}</text>
						</view>
					</scroll-view>
				</view>
				<text class="btn" @click.stop="updateVersion">立即更新</text>
			</view>
			<view class="line" v-if="versionInfo.updateFlag==0"></view>
			<image class="close" v-if="versionInfo.updateFlag==0" @click.stop="close"
				src="https://oss.jxhecong.com/v2/image/version_close@2x.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			versionInfo:{
				type:Object,
				default:{}
			},
			show:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				height: 0
			}
		},
		mounted() {
			const res = uni.getSystemInfoSync();
			const system = res.platform;
			this.height = res.windowHeight;
			console.log(this.height)
		},
		methods: {
			close() {
				this.$emit('close')
			},
			updateVersion() {
				this.$emit('gradeBundle', {
					url: this.versionInfo.updateDownloadUrl
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		z-index:9999;
		background-color:rgba(0,0,0,0.5);
	}

	.warp {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.rect {
		position: relative;
		width: 600rpx;
		height: 660rpx;
		background-color: white;
		border-radius: 20rpx;
	}

	.bg {
		position: relative;
		width: 600rpx;
		height: 252rpx;
		margin-top: -42rpx;
	}

	.version {
		width: 600rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		position: absolute;
		left: 44rpx;
		top: 42rpx;
	}

	.version-tlt {
		color: #FFFFFF;
		font-size: 42rpx;
		font-weight: 600;
	}

	.v-num {
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: 600;
	}

	.version-des {
		position: absolute;
		left: 30rpx;
		top: 223rpx;
		right: 30rpx;

		.tip {
			color: #000000;
			font-size: 28rpx;
		}

		.des {
			color: #404040;
			font-size: 22rpx;
			margin-top: 22rpx;
			line-height: 40rpx;
		}

		.item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
		}

		.dot {
			width: 18rpx;
			height: 18rpx;
			background: #FFFFFF;
			border: 4rpx solid #409EFF;
			margin-right: 8rpx;
			border-radius: 9rpx;
			margin-top: 10rpx;
		}

		.item-txt {
			width: 500rpx;
			color: #606266;
			font-size: 28rpx;
			margin-left: 8rpx;
		}
	}

	.btn {
		width: 450rpx;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 36px;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		position: absolute;
		left: 74rpx;
		right: 74rpx;
		bottom: 60rpx;
		background-color:#00C3A6;
	}

	.line {
		margin-top: 0rpx;
		width: 1rpx;
		height: 72rpx;
		background-color: #FFFFFF;
	}

	.close {
		margin-top: 0rpx;
		width: 60rpx;
		height: 60rpx;
	}
</style>
